<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1{
            width: 600px;
            height: 600px;
            background-color: red;
        }
        #div2,#div3,#div4,#div5{
            margin-top: 50px;
            margin-bottom: 50px ;
            margin-left: 50px;
            float: left;
        }
        #div2{
            width: 500px;
            height: 500px;
            background-color: pink;
        }
        #div3{
            width: 400px;
            height: 400px;
            background-color: seagreen;
        }
        #div4{
            width: 300px;
            height: 300px;
            background-color: yellow;
        }
        #div5{
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <!-- 4.制作4个嵌套DIV ，要求：
      1.每个父DIV尺寸必须大于子DIV
      2.实现每个DIV在父DIV正中间
      3.每个DIV至少要包含一个非DIV元素，比如：文字，P标签，A标签，图片等
      4.通过最底层DIV，打印每层父DIV，如：
	1级父元素为（），1级父节点为（）
	2级父元素为（），2级父节点为（）
    .... -->

    <!-- 往里面插span文本标签-->
    <div id="div1">
        <span></span>
        <div id="div2">
            <span></span>
            <div id="div3">
                <span></span>
                <div id="div4">
                    <span></span>
                    <div id="div5">
                        <span></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
    <script>
        // 求父元素parenElement 求父节点parentNode;
        console.log('1级父元素为（），1级父节点为（）');
         var d1=document.getElementById('div5').parentElement;
         var d11=document.getElementById('div5').parentNode;
         console.log(d1,d11);
        console.log('2级父元素为（），2级父节点为（）');
         var d2=document.getElementById('div5').parentElement.parentElement;
         var d22=document.getElementById('div5').parentNode.parentNode;
         console.log(d2,d22);
         console.log('3级父元素为（），3级父节点为（）');
         var d3=document.getElementById('div5').parentElement.parentElement.parentElement;
         var d33=document.getElementById('div5').parentNode.parentNode.parentNode.parentNode;
         console.log(d3,d33);
         console.log('4级父元素为（），4级父节点为（）');
        var d4=document.getElementById('div5').parentElement.parentElement.parentElement.parentElement;
        var d44=document.getElementById('div5').parentNode.parentNode.parentNode.parentNode;
        console.log(d4,d44);
    </script>
</html>